import React, { memo, useEffect } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";

import { headerLinks } from "../../common/local-data";
import { NavLink } from 'react-router-dom';
import { ThemeProvider } from 'styled-components';
import defaultStyle from '../../assets/theme/colorsOrFont.js'
import { getDetailsAction } from '../../pages/home/store/actionCreators'
import './css.scss'
export default memo(function HYAppHeader() {

    // 页面代码
    const { details } = useSelector(
        (state) => ({
            details: state.getIn(["home", "details"]),
        }),
        shallowEqual
    );
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getDetailsAction());
    }, [dispatch]);
    return (
        <div className='header_wrapper'>
            <img

                className='banner_img'
                src={details.banner}
                alt='科技奖'
            />
            <ThemeProvider theme={defaultStyle}>
                <div className='nav_list'>
                    <div className="w list" style={{ fontSize: '20px' }}>
                        {
                            headerLinks.map(item => {
                                return (
                                    <div key={item.title} className='list_item'>
                                        <NavLink exact={true} activeClassName='active' to={item.link}>
                                            {item.title}
                                        </NavLink>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </ThemeProvider>

        </div>
    )
})
